<template>
  <el-dialog
      title="查看二维码"
      :visible="$store.state.gate_qr_code_dialog"
      width="30%"
      @close="closeGateQrcodeDialog"
  >
    <div class="qrocde-info">
      <div>{{ qrcode }}</div>
      <vue-qr :text="qrcode" :size="200"></vue-qr>
    </div>
  </el-dialog>
</template>

<script>
import WxGate from "@/api/WxGate";
import VueQr from "vue-qr";
import {mapMutations} from "vuex";

export default {
  components: {
    VueQr
  },
  props: {
    gateId: Number
  },
  data() {
    return {
      wxGateApi: null,
      qrcode: ""
    };
  },
  computed: {
    gateQrcodeFlag() {
      return this.$store.state.gate_qr_code_dialog;
    }
  },
  watch: {
    gateQrcodeFlag(val) {
      if (val) {
        this.getQrcode();
      }
    }
  },
  created() {
    this.wxGateApi = new WxGate();
  },
  methods: {
    ...mapMutations(["changeGateQrCodeDialog"]),
    getQrcode() {
      this.wxGateApi.getQrCode(this.gateId, res => {
        if (res.code === 0) {
          this.qrcode = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    closeGateQrcodeDialog() {
      this.changeGateQrCodeDialog(false);
    }
  }
};
</script>

<style lang="scss" scoped>
.qrocde-info {
  text-align: center;
}
</style>
